<template>
    <Col :span="24">
    <chart :options="option" class="echarts" id="chart2"></chart>
    </Col>
</template>

<script>
    function randomData() {
        return Math.round(Math.random()*1000);
    }
    export default {
        mounted: function () {
            let myChart = this.$echarts.init(document.getElementById('chart2'));
            myChart.on('click', function (params) {
                console.log(params.name);
                console.log(params.value);
            });
        },
        data: function () {
            return {
                option: {
                    title: {
//                        text: '各渠道分布图',
//                        subtext: '纯属虚构',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data:['好书','更好的书','最好的书']
                    },
                    visualMap: {
                        min: 0,
                        max: 2500,
                        left: 'left',
                        top: 'bottom',
                        text: ['高','低'],    //文本，默认为数值文本
                        calculable: true,
                        inRange: {
                            color: ['#95d8db','#56bec2','#61c5ca','#269ca1']
                        }
                    },
                    toolbox: {
                        show: false,
                        orient: 'vertical',
                        left: 'right',
                        top: 'center',
                        feature: {
                            dataView: {readOnly: false},
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    series: [
                        {
                            itemStyle: {
                                normal: {
                                    label: {show: false},
                                    color: '#333333'    //地图背景颜色
                                },
                                emphasis: {
                                    label: {
                                        show: true
                                    },
                                    areaColor: '#d0f7fe'
                                }
                            },
                            name: '好书',
                            type: 'map',
                            mapType: 'china',
                            roam: false,
                            label: {
                                normal: {
                                    show: true
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            data:[
                                {name: '北京',value: randomData() },
                                {name: '天津',value: randomData() },
                                {name: '上海',value: randomData() },
                                {name: '重庆',value: randomData() },
                                {name: '河北',value: randomData() },
                                {name: '河南',value: randomData() },
                                {name: '云南',value: randomData() },
                                {name: '辽宁',value: randomData() },
                                {name: '黑龙江',value: randomData() },
                                {name: '湖南',value: randomData() },
                                {name: '安徽',value: randomData() },
                                {name: '山东',value: randomData() },
                                {name: '新疆',value: randomData() },
                                {name: '江苏',value: randomData() },
                                {name: '浙江',value: randomData() },
                                {name: '江西',value: randomData() },
                                {name: '湖北',value: randomData() },
                                {name: '广西',value: randomData() },
                                {name: '甘肃',value: randomData() },
                                {name: '山西',value: randomData() },
                                {name: '内蒙古',value: randomData() },
                                {name: '陕西',value: randomData() },
                                {name: '吉林',value: randomData() },
                                {name: '福建',value: randomData() },
                                {name: '贵州',value: randomData() },
                                {name: '广东',value: randomData() },
                                {name: '青海',value: randomData() },
                                {name: '西藏',value: randomData() },
                                {name: '四川',value: randomData() },
                                {name: '宁夏',value: randomData() },
                                {name: '海南',value: randomData() },
                                {name: '台湾',value: randomData() },
                                {name: '香港',value: randomData() },
                                {name: '澳门',value: randomData() }
                            ]
                        }
                    ]
                }
            }
        }
    }
</script>

<style scoped>
    .echarts {
        border-radius: 4px;
        height: 425px;
        width: 100%;
    }
</style>